<template>
  <div class="receive-table">
    <avue-crud
      :option="option"
      :table-loading="loading"
      :search.sync="search"
      :data="data"
      :page.sync="page"
      ref="crud"
      @search-change="searchChange"
      @search-reset="searchReset"
      @selection-change="selectionChange"
      @current-change="currentChange"
      @size-change="sizeChange"
      @refresh-change="refreshChange"
      @sort-change="sortChange"
    >
      <template slot="menuLeft">
        <p class="text-red">提示：请在左侧勾选分账接收方后，点击下方确定按钮添加至绑定分账关系列表</p>
      </template>
      <template slot-scope="{}" slot="rpiNoSearch">
        <select-page
          ref="searchRpiSelect"
          label="rpiName"
          value="rpiNo"
          :select.sync="search.rpiNo"
          :url="website.searchLink.merchantUrl"
          placeholder-text="分账接收方"
          filter-key="searchParam"
        ></select-page>
      </template>
    </avue-crud>
  </div>
</template>
  
  <script>
import { getList } from "@/api/rb-oem/separateReceive/separate_receive";
import selectPage from "@/components/select-page/select-page";

export default {
  name: "ReceiveTable",
  props: {
    projectCode: {
      type: String,
      default: "",
    },
  },
  components: {
    selectPage,
  },
  data() {
    return {
      query: {},
      loading: false,
      search: {},
      selectionList: [],
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      },
      option: {
        // height: "calc(100vh - 300px)",
        calcHeight: 30,
        // tip: false,
        border: true,
        index: true,
        viewBtn: false,
        addBtn: false,
        editBtn: false,
        delBtn: false,
        selection: true,
        searchMenuSpan: 0,
        columnBtn: false,
        refreshBtn: true,
        searchLabelWidth: 120,
        menuWidth: 0,
        menu: false,
        refreshBtn: false,
        searchShowBtn: false,
        column: [
          {
            label: "项目编号",
            prop: "projectCode",
          },
          {
            label: "项目名称",
            prop: "projectName",
            search: true,
          },
          {
            label: "分账接收方编号",
            searchLabel: "分账接收方",
            prop: "rpiNo",
            type: "select",
            display: false,
            search: true,
            overHidden: true,
          },
          {
            label: "分账接收方名称",
            prop: "rpiName",
          },
        ],
      },
      data: [],
    };
  },
  computed: {
  },
  watch: {
    projectCode: {
      handler(val) {
        if (val) {
          this.refreshChange();
        }
      },
      immediate: true,
    },
  },
  methods: {
    searchReset() {
      this.query = {};
      this.search = {};
      this.onLoad(this.page);
    },
    searchChange(params, done) {
      this.query = params;
      this.page.currentPage = 1;
      this.onLoad(this.page, params);
      done();
    },
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
      this.onLoad(this.page);
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
      this.onLoad(this.page);
    },
    refreshChange() {
      this.onLoad(this.page, this.query);
    },
    sortChange(val) {
      if (val.order == "ascending") {
        this.query.ascs = val.prop;
        this.query.descs = "";
      } else {
        this.query.descs = val.prop;
        this.query.ascs = "";
      }
      this.refreshChange();
    },
    selectionChange(list) {
      this.selectionList = list;
    },
    selectionClear() {
      this.selectionList = [];
      this.$refs.crud.toggleSelection();
    },
    onLoad(page, params = {}) {
      this.loading = true;
      getList(
        page.currentPage,
        page.pageSize,
        Object.assign(params, this.query, { projectCode: this.projectCode })
      ).then((res) => {
        const data = res.data.data;
        this.page.total = data.total;
        this.data = data.records;
        this.loading = false;
        this.selectionClear();
        this.$emit("data-loaded", data.records);
      });
    },
  },
};
</script>
  
  <style lang="scss" scoped>
.receive-table {
  margin-top: 20px;

  /deep/ .el-table {
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }
}

.text-red {
  color: #b20a2c;
}
</style>